<template>
	<view
		:class="['form-item', { 'no-border': noBorder }]"
		:style="{ paddingTop: `${pt}rpx`, paddingBottom: `${pb}rpx` }"
	>
		<view class="title">
			<text v-if="required" class="c-red">*</text>
			<text>{{ title }}</text>
		</view>
		<view class="value" :style="{ color }">
			<slot name="value">
				<view v-if="type == 'text'" class="info-text">
					{{ inputValue || (inputValue as any) === 0 ? value : "-" }}
				</view>
				<view v-if="type == 'input'" class="info-input">
					<up-input
						type="text"
						v-model="inputValue"
						border="none"
						inputAlign="right"
						placeholderStyle="color: #C9CDD4"
						fontSize="28rpx"
						placeholder="请输入"
						@change="inputChange"
					/>
				</view>
				<view v-if="type == 'select'" class="info-select">
					<text v-if="inputValue">{{ inputValue }}</text>
					<text v-else style="color: #c9cdd4">请选择</text>
					<image :src="imgBaseUrl + 'icon-right.png'" class="icon-24 ml-4" />
				</view>
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
const imgBaseUrl = inject("imgBaseUrl")
const props = defineProps({
	type: {
		type: String,
		default: "text", //text、input、select
	},
	title: {
		type: String,
		default: "",
	},
	required: {
		type: Boolean,
		default: false,
	},
	value: {
		validator: (value) => typeof value === "string" || typeof value === "number",
		default: "",
	},
	pt: {
		type: [String, Number] as PropType<string | number>,
		default: "32",
	},
	pb: {
		type: [String, Number] as PropType<string | number>,
		default: "32",
	},
	color: {
		type: String,
		default: "#1D2129",
	},
	noBorder: {
		type: Boolean,
		default: false,
	},
})
const emit = defineEmits(["update:value"])
const inputValue = ref("")
watch(
	() => props.value,
	(newValue) => {
		inputValue.value = newValue
	},
	{
		immediate: true,
	}
)
const inputChange = (value: string) => {
	emit("update:value", value)
}
</script>

<style scoped lang="scss">
.form-item {
	line-height: 40rpx;
	font-size: 28rpx;
	display: flex;
	border-bottom: 1rpx solid $c-grey-e5;
	&.no-border {
		border: none;
	}
	.title {
		width: 30%;
		color: $c-grey-4e;
		display: flex;
		align-items: center;
	}
	.value {
		width: 70%;
		text-align: right;
		.info-text {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}
</style>
